<template>
    <div class="home_page">
        <van-swipe class="banner" :autoplay="3000">
            <van-swipe-item
                v-for="item in bannerList" :key="item"
            >
                <router-link :to="`/plist/list/${item.extra.specialid}`">
                    <img v-lazy="item.imgurl">
                </router-link>
            </van-swipe-item>
        </van-swipe>
        <van-list class="music_list">
            <song-item
                class="music-item"
                v-for="item in musicList"
                :key="item.id"
                :title="item.filename"
                :hash="item.hash"
            />
        </van-list>
    </div>
</template>

<script>
import SongItem from 'Components/SongItem'
import { getNewSongRankList } from 'Api/rank'
import { onBeforeMount, ref, getCurrentInstance } from 'vue'
export default {
    name: 'HomePage',
    components: {
        SongItem
    },
    setup () {
        const { ctx } = getCurrentInstance()
        const bannerList = ref([])
        const musicList = ref([])
        onBeforeMount(async () => {
            const data = await getNewSongRankList()
            bannerList.value = data.banner
            musicList.value = data.data
            const songList = data.data.map(item => {
                return item.hash
            })
            ctx.$Music.initSongList(songList)
        })
        return {
            bannerList,
            musicList
        }
    }
}
</script>

<style lang="scss" scoped>
.home_page {
    margin: 0;
    padding: 0;
}
.banner {
    height: 150px;
    a {
        display: block;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
